<script lang="ts" setup>
import { inject, onMounted, useSlots } from "vue";
import * as _ from "@usemath/utils";

interface OptionProps {
  value?: string | number;
}

const props = defineProps<OptionProps>();
const mode = inject("mode");
const options = inject<any>("options");
const selectedKeys = inject<any>("selectedKeys");
const visible = inject<any>("visible");
const slots = useSlots();

const handleClick = () => {
  if (mode === "multiple") {
    if (!selectedKeys.value.includes(props.value)) {
      selectedKeys.value.push(props.value);
    }
  } else {
    selectedKeys.value = [props.value];
  }
  visible.value = false;
};

onMounted(() => {
  if (options) {
    const finded = _.find(options.value, { value: props.value });
    if (!finded && slots.default !== undefined) {
      options.value.push({
        value: props.value,
        label: slots.default()?.[0].children,
      });
    }
  }
});
</script>

<template>
  <div class="umrp-option" @click="handleClick">
    <umrp-checkbox v-if="mode === 'multiple'"></umrp-checkbox>
    <slot></slot>
  </div>
</template>

<style lang="scss" scoped>
.umrp-option {
  font-size: 12px;
  display: flex;
  gap: 6px;
  align-items: center;
}
</style>
